<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html;charset=gb2312">
    <title>Title</title>
    <style>
        body{
            background: url("../image/b.jpg");
            background-attachment: fixed;
            background-size: cover;
            background-repeat: no-repeat;

        }
        input {
            /*背景色覆盖*/
            border: none; /* 移除边框 */
            background-color: transparent; /* 设置背景色为透明 */
            outline: none; /* 移除聚焦时的轮廓线 */
            padding: 5px; /* 可选：添加内边距 */
        }
        .m{
            position: absolute;
            margin: 20% 40% auto;
        }
        span {
            display: inline-block;
            width: 150px;

            text-align: right;
        }
        .container {
            width: 40%;
            margin: 20px auto;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"rel="external nofollow"></script>

</head>
<body>
<div class="m">
    <form action="../addone" method="post" id="form" class="container">
        <table  border="1">
            <tr>
                <td colspan="2">用户名：<input type="text" id="username" name="username"><span id="showinfo"></span></td>
            </tr>
            <tr>
                <td colspan="2">密码：<input type="password" name="password" id="password"><span id="showwinfo"></span></td>
            </tr>
            <tr class="btn-group">
                <td><input type="submit" id="submit" value="注册" class="btn btn-success btn-group-lg "></td>
                <td><a href="../index.html" class="btn btn-success btn-group-lg ">重新登录</a></td>
            </tr>
        </table>
    </form>
    <script>
        $(function () {
            $("#username").blur(function () {
                var username = $(this).val();
                if (username == "") {
                    $("#showinfo").html("内容不能为空！");
                    return;
                }
                $.ajax({
                    url: 'queryloginname',
                    type: 'POST',
                    dataType: 'HTML',
                    data: {
                        username: username,
                        arg: Math.random()
                    },
                    success: function (returndata) {
                        if (returndata == 'true') {
                            $("#showinfo").html("已被注册！");
                        } else {
                            $("#showinfo").html("可以注册！");
                        }
                    }
                });
            });
        });
        $(function () {
            $("#password").blur(function () {
                var username = $("#username").val();
                var password = $(this).val();
                if (password == "") {
                    $("#showwinfo").html("内容不能为空！");
                    return;
                }
            });
        });
    </script>
</div>
</body>
</html>